<!--直播管理-->
<template lang="pug">
  kalix-master
    div.PersonalCenter
      div.bgc(:style="{width: maxWidth}")
        img(src="/static/PersonalCenter/背景图_u3060.jpg")
      div.personal
        div.personal-left
          div.HeadPortrait
            <!--img(src="static/PersonalCenter/u3741.png")-->
            img(:src="userIcon")
          div.xinxi
            router-link(v-bind:to="{name:'PersonalCenter'}")
              p 个人信息
            router-link(v-bind:to="{name:'InQuire'}")
              p 学分查询
            router-link(v-bind:to="{name:'Collection'}")
              p 我的收藏
            router-link(v-bind:to="{name:'History'}")
              p 历史记录
            router-link(v-bind:to="{name:'CourseManagement'}")
              p 课程管理
            div(v-if="isTeacher")
              router-link(v-bind:to="{name:'LiveManagement'}")
                p.information 直播管理
        div.personal-right
          div.title
            span {{username}}
          div.center
            div.centerBox
              <!--span.kaibo 我要开播-->
              ul(:style="{'margin-top': '76px'}")
                li
                  span.centerP 直播标题 :
                  input.centers(v-model= "liveName" placeholder='请输入标题')
                li
                  span.centerP 类别 :
                  form.form
                    select(name="leixing").select(v-model="type")
                      option(v-for="(item,index) in getSelectDateList ") {{ item.name }}
                li
                  span.centerP 直播简介 :
                  textarea.textInput(v-model ="dec" rows="8" cols="32" style="resize:none")
                li.centerLi
                  span.centerP 直播封面 :
                  kalix-upload(v-model ="img" v-bind:isImage="true" style="width:230px")
              button.baocun(v-on:click="startLive") 开播
              div#black(ref="black" )
              div#black-box(ref="blacks")
                div.contentBox
                  div.denglu
                    span.dengluText  服务器 :&nbsp;&nbsp;
                    input.inputname(v-model="server")
                  div.denglu
                    span 流密匙 :&nbsp;&nbsp;
                    input.inputname(v-model="rtmp")
                  div.disappear(@click="disappear")
                    img(src="/static/Index/关闭按钮_u709.png")
</template>

<script type="text/ecmascript-6">
  import KalixUpload from '../../components/Layout/baseUpload'

  export default {
    components: {KalixUpload},
    data() {
      return {
        isTeacher: false,
        uid: '',
        username: '',
        userIcon: '',
        getSelectDateList: [],
        img: '',
        dec: '',
        type: '',
        rtmp: '',
        server: '',
        liveName: ''
      }
    },
    mounted() {
      this.uid = this.$KalixCatch.get('id')
      this.username = this.$KalixCatch.get('user_name')
      this.getHeadImg(this.uid)
      this.getSelectDate()
      this.getRid()
      console.log('test--------------1111')
    },
    methods: {
      getRid() {
        this.axios.get('/camel/rest/roles', {
          params: {
            jsonStr: {'name': '教师'}
          }
        }).then(res => {
          if (res.data.totalCount > 0) {
            this.getRole(res.data.data[0].id)
          }
        })
      },
      getRole(rid) {
        this.axios.get('/camel/rest/roles/' + rid + '/users/ids', {
          params: {
            id: rid
          }
        }).then(res => {
          console.log('test')
          for (let i = 0; i < res.data.length; i++) {
            if (res.data[i] === parseInt(this.uid)) {
              this.isTeacher = true
            }
          }
        })
      },
      getHeadImg(id) {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/users/' + `${id}`
        }).then(res => {
          this.userIcon = res.data.data[0].icon
        })
      },
      getSelectDate() {
        this.$http.request({
          method: 'Get',
          url: '/camel/rest/training/classifys'
        }).then(res => {
          this.getSelectDateList = res.data.data
        })
      },
      maxWidth() {
        if (this.width < 1200) {
          this.width = 1200 + 'px'
        } else {
          this.width = 100 + '%'
        }
      },
      startLive() {
        this.$http.request({
          method: 'Get',
          url: '/camel/rest/training/lives/startLive',
          params: {
            'userId': this.uid,
            'username': this.username,
            'type': this.type,
            'liveName': this.liveName,
            'imgUrl': this.img
          }
        }).then(res => {
          this.$refs.black.style.display = 'block'
          this.$refs.blacks.style.display = 'block'
          var jsonText = JSON.stringify(res.data.data[0].liveUrl)
          var a = jsonText.split('/')
          this.rtmp = a[a.length - 1].substring(0, a[a.length - 1].length - 1)

          this.server = jsonText.substring(1, jsonText.length - 38)
        })
      },
      thelog() {
        this.$refs.black.style.display = 'block'
        this.$refs.blacks.style.display = 'block'
      },
      disappear() {
        this.$refs.black.style.display = 'none'
        this.$refs.blacks.style.display = 'none'
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .bgc
    width 100%
    height 327px
    position absolute
    top 100px
    z-index -1

  .bgc img
    width 100%
    height 100%

  .personal
    width 1200px
    height 850px
    /*background-color: green*/
    background-color: #fff
    margin 0 auto
    margin-top 186px
    position relative
    border-radius 5px
    box-shadow 4px 4px 6px #ccc

  .personal-left
    width 18%
    height 100%
    float left
    position: relative

  .personal-right
    width 80%
    height 100%
    float right

  /*头像*/
  .HeadPortrait
    width 150px
    height 150px
    position: absolute
    right 0
    top -75px

  .HeadPortrait img
    width 100%
    height 100%

  .xinxi
    position absolute
    top 110px
    right 0
    width 150px
    /*height 300px*/
    border 1px solid #ccc
    border-radius 5px
    overflow hidden

  .xinxi p
    display block
    width 150px
    height 50px
    text-align center
    line-height 50px
    color #999
    box-sizing border-box
    border-top 1px solid #ccc

  .xinxi .information
    background-color: #008F95
    color #fff
    font-weight 700
    border-top none

  /*右侧*/
  .title
    margin-top 36px

  .title span
    font-size 20px
    margin-right 14px
    color #000
    font-weight 700

  .center
    width 905px
    height 700px
    border 1px solid #ccc
    border-radius 5px
    margin-top 54px
    position relative

  .centerBox
    width 400px
    height 90%
    margin 0 auto

  .centerBox li
    margin 26px 0

  .centers
    width 248px
    height 26px

  .centerP
    display inline-block
    width 75px
    margin-right 20px
    text-align right

  .baocun
    display block
    width 80px
    height 34px
    text-align center
    line-height 34px
    color #fff
    background-color #008F95
    border-radius 5px
    cursor pointer
    margin-left 130px
    font-weight 700
    outline none
    border none

  /*::-webkit-scrollbar*/
  /*overflow-x hidden*/
  .kaibo
    position absolute
    color #008F95
    left 36px
    top 34px
    font-weight 700

  .form
    display inline-block

  .select
    width 250px
    height 30px

  #liWidth
    width 500px
    height 50px

  .btn
    width 108px
    height 24px
    background-color: #008F95
    border-radius 10px
    border none
    color #fff
    margin-left 10px
    outline none
    cursor pointer

  .textInput
    width 250px
    height 120px
    box-sizing border-box

  .InpFile
    display inline-block
    width 110px
    height 25px
    background-color #008F95
    font-size 12px
    color #fff
    border-radius 12px
    text-align center
    line-height 25px
    position relative
    margin-left 5px
    cursor pointer

  .InpFile input
    position absolute
    width 100%
    height 100%
    right 0
    top 0
    opacity 0

  .File
    opacity 0

  .centerLi
    width 500px

  /*登录弹窗*/
  #black
    width 100%
    height 100%
    background-color #000
    position fixed
    top 0
    left 0
    z-index 2
    opacity 0.3
    display none

  #black-box
    width 600px
    height 380px
    background-color #fff
    position fixed
    left 50%
    top 50%
    margin-left -300px
    margin-top -190px
    z-index 999
    display none
    border-radius 10px

  .disappear
    width 20px
    height 20px
    position absolute
    right 20px
    top 16px
    cursor pointer

  .disappear img
    height 20px

  .contentBox
    margin 129px auto

  .denglu
    width 350px
    height 40px
    margin 20px 0 0 120px

  .inputname
    width 250px
    height 30px
</style>
